<template>
	<view class="user-stored-list" :style="{background:pageColor}" v-if="isLoad">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true"
			:leftIcon="options.pid || options.coach_id || options.paysuc || options.islogin ? '' : 'icon-left'"
			title="余额充值" color="#fff" :backgroundColor="pageScrollTop>1?'#292D32':''">
			<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" slot="left"
				v-if="options.pid || options.coach_id || options.paysuc || options.islogin">
				<view :class="[{'back-user-ios none': configInfo.isIos},{'back-user-android none': !configInfo.isIos}]"
					style="z-index: 999;margin:0" :style="{background:'rgba(255,255,255,0.5)',color:'#fff'}">
					<view class="iconshouye iconfont"></view>
					<view class="back-user_text">回到首页</view>
				</view>
			</view>
		</uni-nav-bar>
		<!-- #endif -->

		<!-- #ifdef H5 -->
		<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" class="abs"
			:class="[{'back-user-ios none': configInfo.isIos},{'back-user-android none': !configInfo.isIos}]"
			style="z-index: 999;" :style="{background:'rgba(255,255,255,0.5)'}"
			v-if="options.pid || options.coach_id || options.paysuc || options.islogin">
			<view class="iconshouye iconfont"></view>
			<view class="back-user_text">回到首页</view>
		</view>
		<!-- #endif -->

		<view class="stored-card-info rel">
			<image class="abs discount-bg" :src="`https://api.huixuananmm.com/admin/anmo/balancediscount/bg.png`"></image>
			<view class="abs count-info fill-base radius-26">
				<image class="abs bg-img" :src="`https://api.huixuananmm.com/admin/anmo/balancediscount/card-bg-img.png`">
				</image>
				<view class="bg-img rel" style="padding: 43rpx 0 0 38rpx;">
					<view class=" flex-between f-desc">
						<view style="color:rgba(255,255,255,0.8)">当前余额 (元)
							{{configInfo.plugAuth.balancediscount?' 含折扣卡':''}}
						</view>
						<view></view>
					</view>
					<view class=" c-base" style="font-size: 66rpx;margin-top: 15rpx;">
						{{mineInfo.balance||0}}
					</view>
				</view>
				<view class="flex-x-between flex-y-center f-caption" style="height:87rpx"
					:style="{padding: configInfo.plugAuth.balancediscount?'0 10%':'0 20%',color:primaryColor}">
					<view @tap.stop="$util.goUrl({url:`/user/pages/stored/card-list`})"
						v-if="configInfo.plugAuth.balancediscount">我的折扣卡</view>
					<view @tap.stop="$util.goUrl({url:`/user/pages/stored/consume`})">消费明细</view>
					<view @tap.stop="$util.goUrl({url:`/user/pages/stored/record`})">充值记录</view>
				</view>
			</view>
		</view>
		<block v-if="list.data && list.data.length>0">

			<view @tap.stop="toChangeItem('chooseInd',index)"
				class="stored-card-item  mt-md ml-md mr-md pd-lg fill-base radius-16 rel"
				:style="{borderColor:index==chooseInd?primaryColor:'#fff'}" v-for="(item,index) in list.data"
				:key="index">
				<image class="abs card-img" :src="`https://api.huixuananmm.com/admin/anmo/balancediscount/card-bg.png`">
				</image>
				<view class="card-time flex-center f-icontext c-base abs" :style="{background:primaryColor}"
					v-if="item.is_discount">有效期{{item.month}}个月</view>
				<view class="rel flex-between">
					<view class="flex-between" :class="[{'mt-lg':item.discount}]">
						<view style="width:285rpx">
							<view class="flex-y-baseline f-caption c-black" style="height:78rpx">
								<view class="" style="font-size: 70rpx">{{item.price}}</view>
								元
							</view>
							<view class="f-paragraph mt-md" style="color:#323E3A">
								{{item.title}}
							</view>
						</view>
						<view class="card-text flex-y-center f-icontext c-base">
							{{item.is_discount?'享':item.init_price*1>0?'送':'无赠送'}}
							<view class=" f-title text-bold" v-if="item.is_discount || item.init_price*1>0">
								{{item.is_discount?item.discount:item.init_price}}
							</view>
							{{item.is_discount?'折优惠':item.init_price*1>0?'元':''}}
						</view>
					</view>
					<view @tap.stop="toShare(index)" class="share-btn flex-center f-caption text-bold radius"
						:style="{color:index==chooseInd?'#fff':primaryColor,background:index==chooseInd?primaryColor:'',borderColor:primaryColor}"
						v-if="mineInfo.coach_status === 2">邀请充值
					</view>
				</view>
			</view>

			<view class="fill-base mt-md ml-md mr-md pd-lg radius-16">
				<view @tap.stop="options.coach_id?'':$util.goUrl({url:`/user/pages/stored/choose-technician`})"
					class="flex-between">
					<view class="f-title text-bold">选择为{{$t('action.attendantName')}}充值</view>
					<view class="flex-y-baseline f-desc" style="color:#737373">
						<view class="max-200 ellipsis" :style="{color:!coach_info.id ? '#4A4A4A':''}">
							{{coach_info.id ? coach_info.coach_name : '去选择'}}
						</view>
						<i class="iconfont icongengduo_1" style="font-size: 24rpx;" v-if="!options.coach_id"></i>
					</view>
				</view>
			</view>
		</block>
		
		<view class="fill-base mt-md ml-md mr-md radius-16" style="padding:40rpx 30rpx"
			v-if="configInfo.plugAuth.balancediscount && configInfo.balance_discount_status&&balancediscount_take_status&&chooseInd!=-1&&list.data[chooseInd].is_discount">
			<view class="flex-between">
				<view class="f-mini-title c-title text-bold">发放方式</view>
				<view class="flex-center">
					<view @tap.stop="toChangeItem('take_status',index)" class="flex-center f-desc"
						style="color:#2E3541;margin-left: 60rpx;" :style="{color:take_status==index?primaryColor:''}"
						v-for="(item,index) in ['本人消费','赠送好友']" :key="index">
						<i class="pay-icon iconfont c-caption mr-md"
							:class="[{'icon-xuanze':take_status!=index},{'icon-radio-fill':take_status==index}]"
							:style="{color:take_status==index?primaryColor:'#DBDBDB'}"></i>
						{{item}}
					</view>
				</view>
			</view>
			<block v-if="take_status">
				<view class="flex-between pt-lg">
					<view class="f-mini-title c-title text-bold">手机号</view>
					<input v-model="take_phone" type="number" class="pr-lg text-right radius-16"
						style="width:416rpx;height:84rpx;background:#F7F8FB;" placeholder="请输入手机号" />
				</view>
				<view class="flex-between f-desc c-warning mt-md">
					<view></view>
					<view>好友通过手机号登录即可获取折扣卡</view>
				</view>
			</block>
		</view>

		<view class="fill-base mt-md ml-md mr-md pd-lg radius-16">
			<block v-if="list.data && list.data.length>0">
				<view class="f-title text-bold pb-sm">选择充值方式</view>
				<view @tap.stop="toChangeItem('payInd',index)" class="flex-between mt-lg"
					v-for="(item,index) in payList" :key="index">
					<view class="pay-item flex-y-center">
						<view class="item-icon flex-center mr-md"
							:class="[{'wechat':item.id==1},{'alipay':item.id==3}]">
							<i class="iconfont icon-font-color" :class="[item.icon]"></i>
						</view>
						<view class="f-desc text-bold item-title">{{item.title}}
						</view>
					</view>
					<i class="pay-icon iconfont c-caption"
						:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':payInd == index}]"
						:style="{color:payInd==index?primaryColor:'#BEC3CE'}"></i>
				</view>
			</block>
			<view class="f-desc" :class="[{'mt-lg':list.data&&list.data.length>0}]"
				style="padding:12rpx 25rpx;background:#FDF5F0;color:#FF2D00;border-radius: 12rpx;">
				禁止现金或者转账交易，仅限在平台交易，如有发现可向平台客服举报</view>
		</view>



		<view class="fill-base mt-md ml-md mr-md pd-lg radius-16 f-caption c-caption">
			<view>1.充值的本金和赠送金额均不可提现、转移、转赠</view>
			<view class="mt-sm">2.使用范围：本平台所有项目皆可购买，以及交通费支付<span
					v-if="configInfo.plugAuth.balancediscount && configInfo.balance_discount_status">（折扣卡不可用于车费）</span>
			</view>
			<block v-if="configInfo.plugAuth.balancediscount && configInfo.balance_discount_status">
				<view class="mt-sm">{{configInfo.recharge_status?3:1}}.折扣卡为不记名、不挂失、不计息、不兑换现金</view>
				<view class="mt-sm">{{configInfo.recharge_status?4:2}}.折扣卡和优惠券不可同时使用</view>
			</block>
		</view>

		<view class="space-max-footer"></view>
		<fix-bottom-button @confirm="toPay" :text="[{text:'立即充值',type:'confirm'}]" :bgColor="pageColor">
		</fix-bottom-button>

		<uni-popup ref="show_share_item" type="bottom" zIndex="1000">
			<view class="popup-share pd-lg f-desc c-desc fill-base">
				<view class="flex-center">
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="clear-btn list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							:src="`https://api.huixuananmm.com/admin/anmo/coupon/wechat.png`"></image>
						<view style="font-size: 26rpx;color:#666;">分享给好友</view>
					</button>
					<view @tap.stop="toPoster" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							:src="`https://api.huixuananmm.com/admin/anmo/coupon/picture.png`"></image>
						<view>生成海报码</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view @tap.stop="toAppShare" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							:src="`https://api.huixuananmm.com/admin/anmo/coupon/wechat.png`"></image>
						<view style="font-size: 26rpx;color:#666;">分享给好友</view>
					</view>
					<view @tap.stop="toPoster" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							:src="`https://api.huixuananmm.com/admin/anmo/coupon/picture.png`"></image>
						<view>生成海报码</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view @tap.stop="toAppShare(1)" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							:src="`https://api.huixuananmm.com/admin/anmo/coupon/wechat.png`"></image>
						<view style="font-size: 26rpx;color:#666;">分享给好友</view>
					</view>
					<view @tap.stop="toAppShare(2)" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							:src="`https://api.huixuananmm.com/admin/anmo/coupon/wechat-moments.png`">
						</image>
						<view>分享到朋友圈</view>
					</view>
					<view @tap.stop="toPoster" class="list-item flex-center flex-column">
						<image mode="aspectFill" class="item-image"
							:src="`https://api.huixuananmm.com/admin/anmo/coupon/picture.png`"></image>
						<view>生成海报码</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="space-footer"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				pageScrollTop: 0,
				payList: [],
				payInd: 0,
				chooseInd: 0,
				balancediscount_take_status: 0,
				take_status: 0,
				take_phone: '',
				qr_code: {
					0: '',
					1: ''
				},
				imageUrl: '',
				coach_info: {},
				param: {
					page: 1,
					limit: 100
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: false
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			mineInfo: state => state.user.mineInfo,
			isGzhLogin: state => state.user.isGzhLogin,
		}),
		async onLoad(options) {
			this.imageUrl = `https://api.huixuananmm.com/admin/anmo/mine/balance-wechat-share.png`
			this.$util.showLoading()
			let launch = 0
			// #ifdef MP-WEIXIN 
			let {
				scene
			} = await uni.getLaunchOptionsSync()
			launch = scene // 1154：朋友圈
			options.launch = launch
			// #endif
			let {
				discount = 0
			} = options
			options.discount = discount * 1
			options = await this.updateCommonOptions(options)
			let {
				id = 0,
					pid = 0,
					coach_id = 0
			} = options
			options.id = id * 1
			options.pid = pid * 1
			options.coach_id = coach_id * 1
			this.options = options
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
			await this.$util.toAsyAccLogin()
			await this.initIndex()
			if (this.scanRecordId) {
				this.updateScanRecord()
			}
		},
		onShow() {
			// #ifdef APP-PLUS
			var args = plus.runtime.arguments
			console.log(args, "=====args====args")
			if (args == 'wechat-adapay-suc') {
				this.getMineInfo()
				setTimeout(() => {
					this.$util.back()
				}, 1000)
			}
			plus.runtime.arguments = null
			plus.runtime.arguments = ""
			// #endif
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(e) {
			if (e.from === 'button') {
				let {
					imageUrl,
					chooseInd
				} = this
				let {
					id,
					is_discount = 0,
				} = this.list.data[chooseInd]
				let {
					id: pid = 0
				} = this.userInfo
				let {
					coach_id
				} = this.mineInfo
				let path = `/user/pages/stored/list?id=${id}&pid=${pid}&coach_id=${coach_id}&discount=${is_discount}`
				this.$util.log(path)
				this.$refs.show_share_item.close()
				return {
					title: '邀请您充值有优惠～',
					imageUrl,
					path,
				}
			}
		},
		onPageScroll(e) {
			let {
				scrollTop
			} = e
			this.pageScrollTop = scrollTop
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'addScanRecord',
				'updateScanRecord', 'updateCommonOptions'
			]),
			...mapMutations(['updateOrderItem', 'updateUserItem']),
			async initIndex(refresh = false) {
				let {
					pid = 0,
						coach_id = 0,
						discount = 0,
						launch = 0
				} = this.options
				let code = this.scanRecordId
				// #ifdef H5
				code = this.$util.getQueryString('code')
				// #endif 
				if (coach_id && !code) {
					this.addScanRecord({
						type: discount ? 14 : 7,
						qr_id: coach_id,
						is_qr: pid ? 0 : 1
					})
				}
				if (pid && !coach_id && !code) {
					this.addScanRecord({
						type: 2,
						qr_id: pid,
						is_qr: 0
					})
				}
				let {
					id: uid = 0
				} = this.userInfo

				if (!this.configInfo.id || refresh || (code && !uid) || coach_id) {
					await this.getConfigInfo()
				}

				if (launch != 1154 && !code && !uid) {
					await this.getUserInfo()
				}
				this.isLoad = true
				await Promise.all([this.getMineInfo(), this.getList()])

				let {
					alipay_status = 0,
						app_wechat_pay = 0
				} = this.configInfo
				let weixinInd = this.payList.findIndex(item => {
					return item.id == 1
				})
				if (app_wechat_pay && weixinInd == -1) {
					this.payList.push({
						id: 1,
						icon: 'icon-weixin',
						title: '微信支付'
					})
				}
				let alipayInd = this.payList.findIndex(item => {
					return item.id == 3
				})
				if (alipay_status && alipayInd == -1) {
					// #ifndef MP-WEIXIN
					this.payList.push({
						id: 3,
						icon: 'icon-alipay-fill',
						title: '支付宝支付'
					})
					// #endif
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				// #ifdef H5 
				this.$jweixin.initJssdk(() => {
					this.toAppShare()
				})
				// #endif
			},
			initRefresh() {
				this.chooseInd = 0
				this.param.page = 1
				this.initIndex(true)
			},
			async getList() {
				let {
					param
				} = this
				let {
					coach_id = 0
				} = this.options
				param.coach_id = coach_id

				let {
					recharge_status = 0, balance_discount_status = 0,
						plugAuth
				} = this.configInfo
				let list = []
				if (recharge_status == 1) {
					let {
						coach_name = '',
							data = []
					} = await this.$api.mine.cardList(param)
					data.map(item => {
						item.is_discount = 0
						let init_price = (item.true_price * 1 - item.price * 1)
						item.init_price = init_price % 1 == 0 ?
							init_price : this.$util.formatDecimalText(init_price)
					})
					if (coach_id) {
						this.coach_info = {
							id: coach_id,
							coach_name
						}
					}
					list = data
				}
				if (plugAuth.balancediscount && balance_discount_status == 1) {
					let {
						coach_name: cname = '',
						list: discountList = [],
						take_status = 0
					} = await this.$api.mine.discountCardList(param)
					discountList.map(item => {
						item.is_discount = 1
					})
					if (coach_id) {
						this.coach_info = {
							id: coach_id,
							coach_name: cname
						}
					}
					list = list.concat(discountList)
					this.balancediscount_take_status = take_status
				}
				this.list.data = list
				this.loading = false
				this.$util.hideAll()
				if (this.list.data.length == 0) {
					this.chooseInd = -1
				}
			},
			toChangeItem(key, val) {
				this[key] = val
				this.lockTap = false
			},
			// 去支付
			async toPay() {
				if (this.options.launch == 1154) {
					this.$util.showToast({
						title: `请前往小程序使用完整服务`
					})
					return
				}
				let {
					chooseInd,
					payInd,
					take_status,
					take_phone
				} = this
				let {
					id: card_id,
					is_discount = 0
				} = this.list.data[chooseInd]
				if (!is_discount) {
					take_status = 0
					take_phone = ''
				}
				let reg = /^(1[3-9]\d{9})$/
				if (take_status && !reg.test(take_phone)) {
					this.$util.showToast({
						title: `请输入正确的手机号码`
					})
					return
				}
				let {
					id: coach_id = 0
				} = this.coach_info
				let {
					id: pay_model
				} = this.payList[payInd]
				let param = {
					card_id,
					coach_id,
					pay_model,
					take_phone
				}
				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				try {
					let methodModel = is_discount ? 'payDiscountOrder' : 'payBalanceOrder'
					let {
						pay_list,
						order_id,
						order_code
					} = await this.$api.mine[methodModel](param)
					this.$util.hideAll()
					if (pay_list) {
						if (pay_model == 3) {
							pay_list = {
								orderInfo: pay_list,
								provider: 'alipay'
							}
						}

						// #ifdef H5
						if (pay_model == 3) {
							let {
								autograph
							} = this
							let aliptype = is_discount ? 6 : 2
							let alipay_params = `?autograph=${autograph}&id=${order_id}&aliptype=${aliptype}`
							this.updateOrderItem({
								key: 'alipayOrderParams',
								val: {
									order_id,
									page_url: `/user/pages/stored/list?paysuc=1`,
									alipay_params
								}
							})
							this.$util.goUrl({
								url: `/user/pages/alipay-result${alipay_params}`
							})
							setTimeout(() => {
								this.getMineInfo()
								this.$util.back()
							}, 3000)
							return
						}
						// #endif

						// #ifdef APP-PLUS
						if (pay_model === 1 && pay_list.adapay) {
							pay_list = Object.assign(pay_list, {
								type: is_discount ? 6 : 2,
								order_code
							})
						}
						// #endif

						try {
							let payResType = await this.$util.pay(pay_list)
							// console.log(payResType, "=====payResType")
							if (payResType === 'adapay_app_wechat') {
								this.lockTap = false
								return
							}
							if (payResType != 'adapay_app_alipay') {
								this.$util.showToast({
									title: `支付成功`
								})
							}
							setTimeout(() => {
								this.lockTap = false
								this.getMineInfo()
								this.$util.back()
							}, 1000)
						} catch (e) {
							this.$util.showToast({
								title: `支付失败`
							})
							this.lockTap = false
							return
						}
					}
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 1000)
				}
			},
			async toShare(index) {
				this.chooseInd = index
				let {
					is_discount = 0
				} = this.list.data[index]
				this.shareType = is_discount
				if (!this.qr_code[is_discount]) {
					this.$util.showLoading()
					let methodModel = is_discount ? 'coachBalanceDiscountQr' : 'coachBalanceQr'
					let qr_code = await this.$api.mine[methodModel]()
					this.$util.hideAll()
					this.qr_code[is_discount] = qr_code
				}
				// #ifndef H5
				this.$refs.show_share_item.open()
				// #endif
				// #ifdef H5
				this.$util.goUrl({
					url: `/user/pages/stored/poster`
				})
				// #endif
			},
			toPoster() {
				this.$refs.show_share_item.close()
				this.$util.goUrl({
					url: `/user/pages/stored/poster`
				})
			},
			toAppShare(type = 1) {
				let {
					chooseInd = 0,
						imageUrl
				} = this

				let {
					id: pid = 0
				} = this.userInfo
				let {
					coach_id = 0
				} = this.mineInfo

				let {
					id,
					title,
					is_discount = 0
				} = this.list.data[chooseInd]
				let summary = '邀请您充值有优惠～'

				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href =
					`${url}/${this.portName}/#/user/pages/stored/list?id=${id}&pid=${pid}&coach_id=${coach_id}&discount=${is_discount}`

				// #ifdef H5
				this.$jweixin.showOptionMenu()
				this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
				this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				// #endif
				// #ifdef APP-PLUS
				this.$refs.show_share_item.close()
				let scene = type == 1 ? 'WXSceneSession' : 'WXSceneTimeline'
				let item = {
					scene,
					href,
					title,
					summary,
					imageUrl,
				}
				if (this.configInfo.isIos) {
					this.$util.showLoading()
					this.toTransImg(item)
				} else {
					this.sharePage(item)
				}
				// #endif
			},
			toTransImg(item) {
				let that = this
				let cur_unix = this.$util.DateToUnix(this.$util.formatTime(new Date(), 'YY-M-D h:m:s'))
				uni.downloadFile({
					url: item.imageUrl,
					success: (e) => {
						// 将png转换成jpg格式 只有jpg格式支持压缩api
						plus.zip.compressImage({
								src: e.tempFilePath,
								dst: `_doc/${cur_unix}.jpg`,
								format: "jpg"
							},
							response => {
								// 压缩图片
								plus.zip.compressImage({
									src: response.target,
									dst: `_doc/${cur_unix}-img.jpg`,
									quality: 50,
								}, res => {
									item.imageUrl = res.target || `/static/img/logo.png`
									that.sharePage(item)
								}, error => {
									item.imageUrl = `/static/img/logo.png`
									that.sharePage(item)
								})
							})
					}
				})
			},
			sharePage(item) {
				this.$util.hideAll()
				let {
					scene,
					href,
					title,
					summary,
					imageUrl,
				} = item
				uni.share({
					provider: "weixin",
					scene,
					type: 0,
					href,
					title,
					summary,
					imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
		}
	}
</script>


<style lang="scss">
	.user-stored-list {

		.stored-card-info {
			/* #ifdef H5 */
			height: 401rpx;
			/* #endif */
			/* #ifndef H5 */
			height: 541rpx;
			/* #endif */
			overflow: hidden;

			.discount-bg {
				width: 100%;
				/* #ifdef H5 */
				height: 257rpx;
				/* #endif */
				/* #ifndef H5 */
				height: 397rpx;
				/* #endif */
				top: 0;
				left: 0;
			}


			.count-info {
				width: 710rpx;
				height: 312rpx;
				z-index: 2;
				bottom: 0;
				left: 50%;
				margin-left: -355rpx;
				overflow: hidden;

				.bg-img {
					width: 710rpx;
					height: 225rpx;
				}
			}

		}


		.stored-card-item {
			width: 710rpx;
			height: 232rpx;
			background: linear-gradient(184deg, #C9F5E4 0%, #FFFFFF 100%);
			border-radius: 26rpx;
			border: 4rpx solid #FFFFFF;

			.card-time {
				top: 0;
				left: 0;
				min-width: 177rpx;
				height: 40rpx;
				padding: 0 25rpx;
				border-radius: 22rpx 0 32rpx 0;
			}

			.card-text {
				min-width: 90rpx;
				height: 45rpx;
				padding: 0 12rpx;
				background: linear-gradient(270deg, #FF6453 0%, #FF6262 68%, #FFC86F 100%);
				border-radius: 66rpx 66rpx 66rpx 0;
				// border: 1rpx solid #FFFFFF;
			}

			.card-img {
				width: 328rpx;
				height: 195rpx;
				top: 29rpx;
				left: 164rpx;
			}

			.share-btn {
				width: 150rpx;
				height: 56rpx;
				border-radius: 31rpx;
				border: 2rpx solid #fff;
			}
		}

		.pay-item {
			.item-icon {

				width: 70rpx;
				height: 70rpx;
				border-radius: 35rpx;

				.iconfont {
					font-size: 44rpx;
				}
			}

			.item-icon.wechat {
				background: #E7F9EE;

				.iconfont {
					background-image: linear-gradient(180deg, #90EE90 0%, #32CD32 100%, #19c865 100%);
				}
			}

			.item-icon.alipay {
				background: #E9F5FE;

				.iconfont {
					background-image: linear-gradient(180deg, #46BCFF 0%, #2587FF 100%, #1976FF 100%);
				}
			}

			.item-title {
				color: #2E3541;
			}

		}

		.pay-btn {
			width: 283rpx;
			height: 90rpx;
		}

		.popup-share {
			.list-item {
				width: 50%;

				.item-image {
					width: 66rpx;
					height: 66rpx;
				}
			}
		}


	}
</style>